<template>
  <div class="tabbar-box">
    <van-tabbar
      route
      z-index="98"
      active-color="#27CDC5"
      inactive-color="#777B8F"
    >
      <van-tabbar-item
        v-for="(item, index) in TABBAR"
        :key="index"
        replace
        :to="item.path"
        :badge="index == 2 ? '推荐' : ''"
      >
        {{ item.title }}
        <template #icon="props">
          <img :src="props.active ? item.active : item.inactive">
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  setup() {
    const TABBAR = [
      {
        path: '/home',
        title: '首页',
        active: 'https://heals-prod.oss-cn-hangzhou.aliyuncs.com/oss/staticFile/h5/home-active.png',
        inactive: 'https://heals-prod.oss-cn-hangzhou.aliyuncs.com/oss/staticFile/h5/home.png'
      },
      {
        path: '/education',
        title: '宣教中心',
        active:
          'https://heals-prod.oss-cn-hangzhou.aliyuncs.com/oss/staticFile/h5/education-active.png',
        inactive: 'https://heals-prod.oss-cn-hangzhou.aliyuncs.com/oss/staticFile/h5/education.png'
      },
      {
        path: '/course',
        title: '专家课堂',
        active:
          'https://heals-prod.oss-cn-hangzhou.aliyuncs.com/oss/staticFile/h5/course-active.png',
        inactive: 'https://heals-prod.oss-cn-hangzhou.aliyuncs.com/oss/staticFile/h5/course.png'
      },
      {
        path: '/user',
        title: '我的',
        active: 'https://heals-prod.oss-cn-hangzhou.aliyuncs.com/oss/staticFile/h5/user-active.png',
        inactive: 'https://heals-prod.oss-cn-hangzhou.aliyuncs.com/oss/staticFile/h5/user.png'
      }
    ];
    return { TABBAR };
  }
};
</script>

<style>
.van-badge--fixed {
  right: -25px !important;
  min-width: 70px !important;
}
</style>